<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>requestAnimationFrame动画</title>
        <style>
            .demo {
                height: 600px;
                position: relative;
            }
            .demo {
                padding: 10px;
            }
            h4 {
                text-align: center;
                font-size: 110%;
            }
            ball {
                width: 100px;
                height: 100px;
                border-radius: 100px;
                position: absolute;
                left: 50%;
                top: 500px;
                margin-left: -50px;
                background-color: #34538b;
                background-image: -webkit-radial-gradient(100px 100px at 50px 20px, #a0b3d6, #34538b);
                background-image: -moz-radial-gradient(100px 100px at 50px 20px, #a0b3d6, #34538b);
                background-image: radial-gradient(100px 100px at 50px 20px, #a0b3d6, #34538b);
                cursor: move;
                z-index: 1;
            }
            .demo:after {
                display: table;
                content: "";
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <h4>向上拖动小球然后放下</h4>
            <ball style="top: 500px;"></ball><shadow style="opacity: 1; transform: scale(1, 1);"></shadow>         
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/requestAnimationFrame.js"></script>
        <script src="js/tween.js"></script>
        <script>
            var ball = $("ball"), shadow = $("shadow");
            var objBall = {};
            var shadowWithBall = function(top) {
                // 0 ~ 500
                var top = top || parseInt(ball.css("top")),
                scale = 1 + (500 - top) / 300;
                opacity = 1 - (500 - top) / 300;
                if (opacity < 0) opacity = 0;
                shadow.css("opacity", opacity)
                .css("WebkitTransform", "scale("+ [scale, scale].join(",") +")")
                .css("transform", "scale("+ [scale, scale].join(",") +")");
            }, funFall = function() {
                var start = 0, during = 100;
                var _run = function() {
                    start++;
                    var top = Tween.Bounce.easeOut(start, objBall.top, 500 - objBall.top, during);
                    ball.css("top", top);
                    shadowWithBall(top);
                    if (start < during) requestAnimationFrame(_run);
                };
                _run();
            };
            ball.bind("mousedown", function(event) {
                objBall.pageY = event.pageY;
                objBall.flagFollow = true;  
            });
            $(document).bind("mousemove", function(event) {
                if (objBall.flagFollow) {
                    var pageY = event.pageY;
                    objBall.top = 500 - (objBall.pageY - pageY);
                    if (objBall.top < 0) {
                        objBall.top = 0;
                    } else if (objBall.top > 500) {
                        objBall.top = 500;
                    }
                    //cosnole.log(objBall.top);
                    ball.css("top", objBall.top);
                    shadowWithBall(objBall.top);    
                }
            });
            $(document).bind("mouseup", function(event) {
                if (objBall.flagFollow) funFall();
                objBall.flagFollow = false; 
            });
        </script>
    </body>
</html>